import React, { useEffect } from 'react'
import { RecommendWrap, ListWrap, Subh1,Subh3 } from './StyleHomePage'
import {useHistory} from 'react-router-dom'
import { useSelector,useDispatch } from 'react-redux'
import { loadDataAsync } from '../../actionCreater'

import Chunk from '@a/images/home/chunk.png'
import List_1 from '@a/images/recommend/list_1.png'

const Recommend = (props) => {

    const dispatch = useDispatch()
    const state = useSelector(state => state.recommend)
    useEffect(() => {
        dispatch(loadDataAsync())
    },[dispatch])

    let history = useHistory()
    const handleClick = () => {
        history.push('/wxpay',state)
    }
    
    return (
        <div>
            <RecommendWrap>
                <span>教学专题推荐</span>
                <div>
                    <img src={`${Chunk}`} alt="" />
                    <span>查看全部</span>
                </div>
            </RecommendWrap>
            
            <ListWrap>
                <ul>
                    { 
                        state.recommend.map(value => {
                            return (
                                <li
                                    key={value.zlId}
                                    onClick={handleClick}
                                >
                                    <div>
                                        <img src={"http://10.9.65.207:8080"+value.zlFengMian} alt="" />
                                    </div>
                                    <div>
                                        <Subh1>{value.zlName}</Subh1>
                                        <Subh3>{value.zlRead}人已参加 | {value.zlSave}人已参加</Subh3>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </ListWrap>
        </div>
    )
}


export default Recommend
